<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>React 实例</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">
    class MyComponent extends React.Component {
        handleClick() {
            // 使用原生的 DOM API 获取焦点
            this.refs.myInput.focus();
        }
        render() {
            //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
            return (
                    <div>
                    <input type="text" ref="myInput" />
                    <input
            type="button"
            value="点我输入框获取焦点"
            onClick={this.handleClick.bind(this)}
        />
        </div>
        );
        }
    }

    ReactDOM.render(
    <MyComponent />,
            document.getElementById('example')
    );
</script>

</body>
</html>